<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script th:src="@{static/js/echarts.min.js}"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:600px;"></div>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据


    var option = {
        title: {
            text: '贷款数据统计',
            left: 'center'
        },
        /* 提示框 */
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',

            /* 后端传过来的data数据的name */
            data: ["商品A", "商品B", "商品C", "商品D", "商品E"],
        },
        series: [{
            name: '各部分数据占比',
            type: 'pie',
            radius: '55%',
            /* 后端传输数据修改此处后端传输键值对过来成data数据 */
            data:[{value:12,name:"商品A"},
                {value:20,name:"商品B"},
                {value:20,name:"商品C"},
                {value:20,name:"商品D"},
                {value:20,name:"商品E"}],

            emphasis: {
                itemStyle: {
                    shadowBlur: 12,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>
